<!-- 修改基本信息 -->
<template>
<div class="container">
    <div class="opa"></div>
    <div class="white_box">
        <!-- 信息列表 -->
        <van-cell-group inset>
            <van-field v-model="userInfo.phone" label="手机号" input-align="right" readonly disabled />
            <van-field v-model="userInfo.name" label="姓名" clearable input-align="right" placeholder="请输入姓名" />
            <van-cell title="性别" :value="genderText" is-link @click="showGenderPicker = true;" />
            <van-cell title="出生日期" :value="birthShowText" is-link @click="showDatePicker = true;" />
        </van-cell-group>

        <!-- 按钮 -->
        <div class="btns">
            <van-button v-show="showBack" type="default" color="#dfdfdf" @click="$router.go(-1)">返回</van-button>
            <van-button type="default" color="#66ca98" @click="submitUserInfo">保存</van-button>
        </div>
    </div>

    <!-- 性别选择 -->
    <van-popup v-model:show="showGenderPicker" position="bottom">
        <van-picker title="性别" show-toolbar :columns="genderColumns" @confirm="genderConfirm" @cancel="genderCancel" />
    </van-popup>
    <!-- 日期选择 -->
    <van-popup v-model:show="showDatePicker" position="bottom">
        <van-datetime-picker v-model="birthVal" type="date" title="选择出生日期" :min-date="minDate" :max-date="maxDate" @confirm="dateConfirm" @cancel="dateCancel" />
    </van-popup>

</div>
</template>

<script>
import {
    apiRequest
} from '../../assets/js/axios_api';
import profileUrl from '../../assets/img/profile_p1.jpeg';
import {dateFormat} from '../../assets/js/utils'

export default {
    metaInfo() {
        return {
            title: '修改个人信息'
        }
    },
    name: 'BaseInfoEdit',
    data() {
        return {
            showBack: false,
            fromPath: '',
            profileUrl: profileUrl,
            userInfo: {},
            birthVal: '',
            minDate: new Date('1950/1/1'),
            maxDate: new Date(),
            showDatePicker: false,
            showGenderPicker: false,
            genderColumns: ['男', '女', '保密'],
            genderText: '',
            birthShowText: ''
        }
    },
    components: {

    },
    mounted() {
        console.log(this.fromPath)
        this.showBack = this.fromPath.includes('BaseInfo');

        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        if (this.userInfo.birthday) {
            this.birthVal = new Date(this.userInfo.birthday);
            this.birthShowText = this.userInfo.birthday.split(' ')[0]
        } else {
            this.birthVal = new Date('2000/1/1');
        }
        this.genderText = this.userInfo.gender == '0' ? '男' :
            this.userInfo.gender == '1' ? '女' :
            this.userInfo.gender == '2' ? '保密' : ''
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.fromPath = from.name || ''
        })
    },
    methods: {
        // 点击提交
        submitUserInfo() {
            if (!this.userInfo.name) {
                this.$toast('请输入姓名');
                return;
            }
            if (!this.userInfo.phone) {
                this.$toast('请输入手机号码');
                return;
            }
            if (this.userInfo.gender != '0' && this.userInfo.gender != '1' && this.userInfo.gender != '2') {
                this.$toast('请选择性别');
                return;
            }
            this.userInfo.birthday = this.birthShowText + ' 00:00:00';
            if (!this.userInfo.birthday) {
                this.$toast('请选择出生日期');
                return;
            }
            // 调用提交客户信息接口
            let param = {
                "cusId": this.userInfo.cusId,
                "birth": this.userInfo.birthday,
                "cusName": this.userInfo.name,
                "gender": this.userInfo.gender,
            }
            apiRequest(this, 'hmcustomer', param, resData => {
                sessionStorage.setItem('userInfo', JSON.stringify(this.userInfo))
                if (this.userInfo.height) {
                    this.$router.push('/baseinfo')
                } else {
                    this.$router.push('/recheight')
                }
            }, 'put')
        },
        // 性别弹框点击确认
        genderConfirm(value, index) {
            this.showGenderPicker = false;
            this.userInfo.gender = index;
            this.genderText = this.userInfo.gender == '0' ? '男' :
                this.userInfo.gender == '1' ? '女' :
                this.userInfo.gender == '2' ? '保密' : ''
        },
        // 性别弹框点击取消
        genderCancel() {
            this.showGenderPicker = false;
        },
        // 日期选择点击确认
        dateConfirm() {
            this.showDatePicker = false;
            this.birthShowText = dateFormat(this.birthVal);
        },
        // 日期选择点击取消
        dateCancel() {
            this.showDatePicker = false;
        },
    }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/common.less';

.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // background-image: url(../../assets/img/bg_img.png);
    background-image: url(../../assets/img/bg_1.jpeg);
    // background-image: url(../../assets/img/bg_4.jpeg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: rgba(200, 200, 200, 0, 4);

    .opa {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(200, 200, 200, 0.5);
    }

    .white_box {
        background-color: #fff;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        position: absolute;
        top: 12.5rem;
        left: 0;
        right: 0;
        bottom: 0;

        .van-cell__value {
            color: #323233;
        }
    }

    // 按钮样式
    .btns {
        padding-top: 12.5rem;

        button {
            width: 60%;
            margin: 0.625rem 20%;
            height: 2.5rem;
            border-radius: 0.5rem;
        }

    }
}
</style>
